//模拟数据将API服务上面的内容渲染到页面上面去
function API() {
    let data = [
        { name: "全部", hint: "身份证实名" },
        { name: "生活服务", hint: "快乐" },
        { name: "金融科技", hint: "毁灭吧" },
        { name: "交通地理", hint: "累了" },
        { name: "充值缴费", hint: "又要充钱" },
        { name: "数据智能", hint: "机器人毁灭世界" },
        { name: "企业工商", hint: "工厂难受" },
        { name: "应用开发", hint: "神级运用" },
        { name: "电子商务", hint: "直播带货" },
        { name: "吃喝玩乐", hint: "瓜子零食" },
        { name: "文娱视频", hint: "快手，斗鱼" },
        { name: "免费接口大全", hint: "全部都是接口" },
        { name: "短信", hint: "没有短信" },
        { name: "汽车", hint: "兰博基尼" },
        { name: "核验", hint: "阴性" },
        { name: "最新发布", hint: "永劫无间" },
        { name: "API私有化部署", hint: "API全是我的" },
    ]
    let ser = document.querySelector("main .serve")
    data.forEach((i, j) => {
        ser.innerHTML += `
    <span data-hint="${i.hint}">${i.name}</span>
    `
    });
    let span = document.querySelectorAll("main .serve span")
    span[0].classList.add("active")
}
API()

//API服务的点击事件
function apiSer() {
    let ser = document.querySelector("main .serve")
    let span = document.querySelector("main .API-detail .title span")
    let input = document.querySelector("main .API-detail .title input")
    ser.addEventListener("click", function (e) {
        if (e.target.tagName == "SPAN") {
            for (let index = 0; index < ser.children.length; index++) {
                ser.children[index].classList.remove("active")
            }
            e.target.classList.add("active")
            span.textContent = e.target.textContent
            input.placeholder = e.target.dataset.hint
        }
    })
}
apiSer()


//API详细内容的内容渲染
function APIDetail() {
    let data = [
        { img: "1", name: "2021出行防疫政策指南", price: "免费", Enterprise: false },
        { img: "1", name: "2021出行防疫政策指南", price: "免费", Enterprise: false },
        { img: "1", name: "2021出行防疫政策指南", price: "免费", Enterprise: false },
        { img: "1", name: "2021出行防疫政策指南", price: "免费", Enterprise: false },
        { img: "1", name: "2021出行防疫政策指南", price: "免费", Enterprise: false },
        { img: "2", name: "身份证实名", price: "￥0.2000/次", Enterprise:true },
        { img: "2", name: "身份证实名", price: "￥0.2000/次", Enterprise:true },
        { img: "2", name: "身份证实名", price: "￥0.2000/次", Enterprise:true },
        { img: "2", name: "身份证实名", price: "￥0.2000/次", Enterprise:true },
        { img: "2", name: "身份证实名", price: "￥0.2000/次", Enterprise:true },
        { img: "3", name: "天气预报", price: "免费", Enterprise: false },
        { img: "3", name: "天气预报", price: "免费", Enterprise: false },
        { img: "3", name: "天气预报", price: "免费", Enterprise: false },
        { img: "3", name: "天气预报", price: "免费", Enterprise: false },
        { img: "3", name: "天气预报", price: "免费", Enterprise: false },
        { img: "4", name: "银行卡四元数校验", price: "￥0.3360/次", Enterprise:true },
        { img: "4", name: "银行卡四元数校验", price: "￥0.3360/次", Enterprise:true },
        { img: "4", name: "银行卡四元数校验", price: "￥0.3360/次", Enterprise:true },
        { img: "4", name: "银行卡四元数校验", price: "￥0.3360/次", Enterprise:true },
        { img: "4", name: "银行卡四元数校验", price: "￥0.3360/次", Enterprise:true },
        { img: "5", name: "短信API服务", price: "￥0.0400/次", Enterprise:true },
        { img: "5", name: "短信API服务", price: "￥0.0400/次", Enterprise:true },
        { img: "5", name: "短信API服务", price: "￥0.0400/次", Enterprise:true },
        { img: "5", name: "短信API服务", price: "￥0.0400/次", Enterprise:true },
        { img: "5", name: "短信API服务", price: "￥0.0400/次", Enterprise:true },
    ]
    let ul = document.querySelector(".API-detail .content")
    data.forEach((i, j) => {
        ul.innerHTML += `
        <li class="${i.Enterprise? "on":""}">
          <div class="content-top">
              <img src="./images/API_0${i.img}.jpg">
              <p>${i.name}</p>
              <span class="green">${i.price}</span>
          </div>
          <div class="apply-for">申请数据</div>
        </li>  
        `
    });
    let span =document.querySelectorAll(".API-detail .content li .content-top span")
    span.forEach((i,j) => {
        if (i.textContent=="免费") {
            i.style.color="#0f0"
        }else{
            i.style.color="#f00"
        }
    });
}
APIDetail()


//分页器
function sorter(){
    let spans=document.querySelectorAll(".Switch-the-page .iteam")
    let divs=document.querySelectorAll(".Switch-the-page .sorter-previous")
    let ax=document.querySelector(".Switch-the-page .ax")
    let as=document.querySelector(".Switch-the-page .as")
    let index=0
    spans.forEach((i,j) => {
        i.addEventListener("click",function(){
            spans[index].classList.remove("active")
            i.classList.add("active")
            index=j
        })
    });
    ax.addEventListener("click",function(){
        spans[index].classList.remove("active")
        index++
        if (index==4) {
            divs[0].classList.remove("on")
            divs[1].classList.add("on")
        }
        spans[index].classList.add("active")
    })
    as.addEventListener("click",function(){
        spans[index].classList.remove("active")
        index--
        if (index==3) {
            divs[1].classList.remove("on")
            divs[0].classList.add("on")
        }
        spans[index].classList.add("active")
    })
}
sorter()


//点击图片跳转到详情页面
function details(){
    let ul=document.querySelector(".content")
    ul.addEventListener("click",function(e){
        if (e.target.tagName=="IMG") {
            location.href="./API-details.html"
        }
    })
}
details()